<div id="content">
  <div>
    <div class="scroll-button">
      <a class="left" (click)="scrollLeft()"><i class="fa fa-caret-left"></i></a>
      <a class="right" (click)="scrollRight()"><i class="fa fa-caret-right"></i></a>
    </div>
    <div class="tabs" #tabs>
      <ul [ngStyle]="{'width':tabsWidth+'px'}">
        <elements-content-tab
          *ngFor="let view of viewList;let i = index"
          [view]="view" (onAction)="onViewAction($event)" (contextmenu)="onRightClick($event, i)">
        </elements-content-tab>
      </ul>
    </div>
  </div>
  <div id="winContainer">
    <elements-content-window *ngFor="let view of viewList" [view]="view" ></elements-content-window>
  </div>
  <div id="batchCommandDiv">
    <input placeholder=" {{'Send text to all ssh terminals'| translate }} ..."
           maxlength="2048"
           title="{{'Send text to all ssh terminals'| translate }} ..."
           (keydown.enter)="sendBatchCommand()"
           type="text" tabindex="2" spellcheck="false" [(ngModel)]="batchCommand">
  </div>
</div>

<elements-connect [ngStyle]="{'display': 'none'}" (onNewView)="onNewView($event)" ></elements-connect>

<div #rMenu *ngIf="isShowRMenu" class="basicContext" [style.top]="pos.top" [style.left]="pos.left">
  <table>
    <tbody>

    <tr class="basicContext__item ">
      <td class="basicContext__data"  (click)="rCloneConnect()"><span class="basicContext__icon fa fa-copy"></span> {{ "Clone Connect"| translate }} </td>
    </tr>
    <tr class="basicContext__item basicContext__item--separator"></tr>
    <tr class="basicContext__item ">
      <td class="basicContext__data"  (click)="rReconnect()"><span class="basicContext__icon fa fa-refresh"></span> {{ "Reconnect"| translate }} </td>
    </tr>
    <tr class="basicContext__item basicContext__item--separator"></tr>
    <tr class="basicContext__item ">
      <td class="basicContext__data"   (click)="rClose()"> <span class="basicContext__icon fa fa-close "></span> {{ "Close Current Tab"| translate }} </td>
    </tr>
    <ng-template [ngIf]="viewList.length>1">
      <tr class="basicContext__item basicContext__item--separator"></tr>
      <tr class="basicContext__item ">
        <td class="basicContext__data"  (click)="rCloseAll()"><span class="basicContext__icon fa fa-close"></span> {{ "Close All Tabs"| translate }} </td>
      </tr>
      <tr class="basicContext__item basicContext__item--separator"></tr>
      <tr class="basicContext__item ">
        <td class="basicContext__data"  (click)="rCloseOthers()"><span class="basicContext__icon fa fa-close"></span> {{ "Close Other Tabs"| translate }} </td>
      </tr>
    </ng-template>
    <ng-template [ngIf]="rIdx>0">
      <tr class="basicContext__item basicContext__item--separator"></tr>
      <tr class="basicContext__item ">
        <td class="basicContext__data"  (click)="rCloseLeft()"><span class="basicContext__icon fa fa-close"></span> {{ "Close Left Tabs"| translate }} </td>
      </tr>
    </ng-template>
    <ng-template [ngIf]="rIdx!=viewList.length-1">
      <tr class="basicContext__item basicContext__item--separator"></tr>
      <tr class="basicContext__item ">
        <td class="basicContext__data"  (click)="rCloseRight()"><span class="basicContext__icon fa fa-close"></span> {{ "Close Right Tabs"| translate }} </td>
      </tr>
    </ng-template>

<!--    <tr class="basicContext__item basicContext__item&#45;&#45;separator"></tr>-->
<!--    <tr class="basicContext__item ">-->
<!--      <td class="basicContext__data"  (click)="rDisconnect()"><span class="basicContext__icon fa fa-pause-circle"></span> {{ "Disconnect"| translate }} </td>-->
<!--    </tr>-->
    </tbody>
  </table>
</div>
